<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" @scroll="scroll">
		<view slot="top">
			<view class="status_bar backbule">
			  <!-- 这里是状态栏 -->
		    </view>
			<view class="top backbule ">
				<view class="top-tool">
					<u-search placeholder="片名/演员" v-model="keyword" :animation="true" @focus="search()"></u-search>
				</view>
			</view>
			<view class="top-menu" v-if="is_hidden"><text style="font-size: larger;">{{cate_title}}</text></view>
			<view v-else>
				<view class="select-box" v-if="tabslist" style="margin-top: 34rpx;">
					<view class="select-row">
						<scroll-view :scroll-x="true" :show-scrollbar="false" class="select-row-scroll" >
							<text class="select-text"
								:class="{'select-text-hover':searchForm.type == index}" 
								v-for="(item,index) in tabslist" :key="index"
								@click="onSelect('type',index)">{{item.type_name}}</text>
						</scroll-view>
					</view>
					<view class="select-row">
						<scroll-view :scroll-x="true" :show-scrollbar="false" class="select-row-scroll">
							<text class="select-text"
							:class="{'select-text-hover':isNoSelect('category_id')}"
							@click="onSelect('category_id',null)">全部</text>
							<text class="select-text"
								:class="{'select-text-hover':searchForm.category_id == item}" 
								v-for="(item,index) in category_list"
								:key="item"
								@click="onSelect('category_id',item)">{{item}}</text>
						</scroll-view>
					</view>
					<view class="select-row">
						<scroll-view :scroll-x="true" :show-scrollbar="false" class="select-row-scroll">
							<text class="select-text"
							:class="{'select-text-hover':isNoSelect('region')}"
							@click="onSelect('region',null)">全部</text>
							<text class="select-text"
								:class="{'select-text-hover':searchForm.region == item}" 
								v-for="(item,index) in region_list"
								:key="item"
								@click="onSelect('region',item)">{{item}}</text>
						</scroll-view>
					</view>
					<view class="select-row">
						<scroll-view :scroll-x="true" :show-scrollbar="false" class="select-row-scroll">
							<text class="select-text"
							:class="{'select-text-hover':isNoSelect('year')}"
							@click="onSelect('year',null)">全部</text>
							<text class="select-text"
								:class="{'select-text-hover':searchForm.year == item}" 
								v-for="(item,index) in year_list"
								:key="item"
								@click="onSelect('year',item)">{{item}}</text>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<h-videolistS-v  :videolist="dataList" @change="videoitemTap"></h-videolistS-v>
		</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cate_title:'',
				dataList:[],
				keyword:'',
				is_hidden:false,
				tabslist:[],
				category_list:[],
				vod_class:"",
				vod_area:"",
				vod_year:"",
				type_id:1,
				region_list:[],
				year_list:[],
				searchForm:{
					keyword:null,
					type:null,
					region:null,
					year:null,
					category_id:null,
					page:1,
					limit:24
				},
				item:[]
				
			}
		},
		onShow() {
			// const type_id = uni.getStorageSync('type_id');
			// if(type_id>0){
			// 	this.type_id = type_id;
			// }
		},
		onLoad(option) {
			this.getCatJieko();
		},
		methods: {
			videoitemTap(item) {
				uni.navigateTo({
					url:'/pages/detail/detail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			search(){
				uni.switchTab({
					url:'/pages/search/search?item='
				});	
			},
			async getCatJieko(){
				let tabslist=[];
				this.$http_request('/api.php/provide/search_cate/',{}).then(res=>{
					if(res.code==1){
						this.tabslist = res.list;
						this.searchForm['type'] = 0;
						console.log(tabslist);
						this.category_list = res.list[0]['class'];
						this.region_list = res.list[0]['area'];
						this.year_list = res.list[0]['year'];
						let type_id = this.tabslist[0]['type_id'];
						this.type_id = type_id;
						this.cate_title =  res.list[0]['type_name'];
					}
					console.log(res);
					uni.showLoading({
						title: '加载中',
						mask:true
					});
				})
			},
			isNoSelect(name){
				return this.searchForm[name] ? false : true
			},
			onSelect(name,value){
				console.log(name)
				console.log(value)
				console.log( this.tabslist)
				if(name == 'type'){
					this.cate_title = this.tabslist[value]['type_name']
				}
				
				this.searchForm[name] = value
				if(name=='type'){
					this.category_list = this.tabslist[value]['class']
					this.year_list = this.tabslist[value]['year']
					this.region_list = this.tabslist[value]['area']
					this.type_id = this.tabslist[value]['type_id']
					this.searchForm.category_id = ''
					this.searchForm.region = ''
					this.searchForm.year = ''
					this.vod_year = ''
					this.vod_area = ''
					this.vod_class = ''		
				}
				if(name=='category_id'){
					this.vod_class = value
				}
				if(name=='region'){
					this.vod_area = value
				}
				if(name=='year'){
					this.vod_year = value
				}
				this.$refs.paging.reload();
			},
			
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pg: pageNo,
					pageNo: pageSize,
					t:this.type_id,
					vod_year:this.vod_year,
					vod_area:this.vod_area,
					vod_class:this.vod_class
				}
				this.$http_request('/api.php/provide/vod/',params).then(res=>{
					if(res.code==1){
						this.$refs.paging.complete(res.list);	
					}else{
						this.$refs.paging.complete(false);
					}
				}).catch(res => {
					console.log(43243254);
					this.$refs.paging.complete(false);
				})
			},
			itemClick(item, index) {
				console.log('点击了', item.title);
			},
			scroll(event){
				if(event.detail.scrollTop>400){
					this.is_hidden = true;
				}else{
					this.is_hidden = false;
				}
			}
		}
		
	}
</script>

<style scoped>
	.status_bar {
		  height: var(--status-bar-height);
		  width: 100%;
		  text-overflow: ellipsis; 
	}
	.swiper {
		height: 100%;
	}
	.top{
		height: 120rpx;
		display: flex;
		
	}
	.top-tool{
		line-height: 120rpx;
		width: 100%;
		margin: 0 40rpx;
	}
	.content{
		margin: auto;
	}
	
	
	.top-menu{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: hsl(194deg 11% 29% / 71%);
		color: #ffffff;
		width: 100%;
		position: fixed;
		z-index: 999999;
	}
	.select-row{padding: 20rpx;width: 690rpx}
	.select-row-scroll{white-space: nowrap;}
	.uni-scroll-view, .uni-scroll-view-content {
	    position: relative;
	    width: 100%;
	    height: 100%;
	}
	.select-text {
	    color: #afadad;
	    padding: 5px;
	    margin: 0 5px;
	} 
	  .select-text-hover {
	      color: #8ac2ff;
	      background-color: #f1f1f1;
	      font-weight: bold;
		  border-radius: 20rpx;
	  }
</style>
